<template>
  <MyDialog title="fitment" :submit="onButton">
    <q-card-section class="q-ma-sm">
      <div class="text-body q-ma-md row">
        <div class="col-4 fal">{{ 'Scan:' }}</div>
        <div class="col-6">
          <!-- <q-input filled v-model="text" :dense="true"> </q-input> -->
          <ScanInput
            ref="scanInputDom"
            v-model="text"
            @enter="onScanInputEnter"
            initFocus
          >
          </ScanInput>
        </div>
        <div class="col-2">
          <q-icon class="cursor-pointer" color="primary" name="qr_code" size="lg" @click="scanDiag = true"></q-icon>
          <q-dialog  v-model="scanDiag">
            <OpenCam @submit="(v:string)=>onSubmitCam(v)"></OpenCam>
          </q-dialog>
        </div>
      </div>
    </q-card-section>

  </MyDialog>

</template>
<script setup lang="ts">
import { ref } from 'vue';
import ScanInput from '../ScanInput.vue';
import OpenCam from 'src/components/OpenCam.vue';
import { Parts } from 'src/services/type';
import MyDialog from '../container/MyDialog.vue';

const text = ref('');
const scanDiag = ref(false);
const props = defineProps<{
    sn?: string
    actions: 'Fitment'|'Defitment'
}>()


const emit = defineEmits(['update']);

const onScanInputEnter = (string: string) => {
  text.value = string;
  emit('update', string);
};

function onSubmitCam(string: string) {
  scanDiag.value = false
  text.value = string
  emit('update', string);
}

/* function output(string: string) {
  const obj = JSON.parse(string);
  text.value = string;
  return {
    stock_code: obj.CAT,
    serial_no: obj.SN,
  };
} */

function onButton() {
  emit('update', text.value);
}
</script>
